<template>
 <div>
 <van-nav-bar
 title="城市列表"
 left-arrow
   @click-left="onClickLeft"
 />
 <van-index-bar
 :index-list="indexList"
  highlight-color='#1cb676'
 >
<van-index-anchor index="#">当前城市</van-index-anchor>
  <van-cell title="北京" />
  <van-index-anchor index="热">热门城市</van-index-anchor>
  <van-cell
  v-for="(hotItem , index) in hotArray"
  :key="index"
 :title="hotItem.label"
  />
 <!-- A-Z 城市 -->
  <template v-for="(item, index) in array">
  <van-index-anchor
 :key="list[index]"
:index="item.length > 0 ? item[0].short[0].toUpperCase() : list[index]"
  >{{item.length > 0 ? item[0].short[0].toUpperCase() : list[index]}}
  </van-index-anchor>
  <template v-if="item.length">
 <van-cell
 v-for="(elment) in item"
:key="elment.value"
:title="elment.label"
 />
 </template>
 <template v-if="!item.length">
 <van-cell
:key="index"
 title="暂无城市"
 />
 </template>
 </template>
</van-index-bar>

 </div>
</template>

<script>
import { getCity, getHotcity } from '@/api/user'
export default {
  data () {
    return {
      indexList: ['#', '热', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      list: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      hotArray: [],
      array: []
    }
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    }
  },
  async created () {
    const res = await getHotcity()
    const { body } = await getCity()
    this.hotArray = res.body
    console.log(body)
    for (let i = 0; i < this.list.length; i++) {
      this.array.push(
        body.filter(item => item.short[0].toUpperCase() === this.list[i])
      )
    }
  }
}
</script>

<style>
.van-index-bar__index {
 padding: 4px 10px 0;
}
</style>
